<template>
    <HeaderBar :title="$t('mine.wallet.setting.title')" />
    <view class="password-container main-container">
        <view class="form-container">
            <view class="item">
                <view class="name">{{$t('mine.wallet.setting.name')}}</view>
                <view class="input">
                    <wd-input
                        v-model="state.realName"
                        :placeholder="$t('mine.wallet.setting.verifyName')"
                        placeholderStyle="font-size:28rpx"
                        no-border
                    />
                </view>
            </view>
            <view class="item">
                <view class="name">{{$t('mine.wallet.setting.phoneNo')}}</view>
                <view class="input">
                    <wd-input
                        v-model="state.phoneNo"
                        :placeholder="$t('mine.wallet.setting.verifyPhoneNo')"
                        placeholderStyle="font-size:28rpx"
                        no-border
                    />
                </view>
            </view>
            <view class="item">
                <view class="name">{{$t('mine.wallet.setting.walletAddress')}}</view>
                <view class="input">
                    <wd-input
                        v-model="state.address"
                        :placeholder="$t('mine.wallet.setting.verifyWalletAddress')"
                        placeholderStyle="font-size:28rpx"
                        no-border
                    />
                </view>
            </view>
            <view class="item">
                <view class="name">{{$t('mine.wallet.setting.network')}}</view>
                <view class="input">
                    <picker
                        @change="
                            (e) => {
                                bindPickerChange(e, 'networkKey');
                            }
                        "
                        :value="state.networkKey"
                        :range="networkList"
                    >
                        <view :class="['uni-input', state.networkKey < 0 && 'grey']">
                            {{ state.networkKey >= 0 ? networkList[state.networkKey] : $t('common.select') }}
                        </view>
                    </picker>
                </view>
                <view class="arrow"><wd-icon name="arrow-right" size="36rpx" color="#999" /></view>
            </view>
        </view>
        <view class="form-btns" @click="onSubmit">{{$t('common.submit')}}</view>
    </view>

    <uni-popup ref="serviceRef">
        <Service @onClose="onClose" />
    </uni-popup>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import Service from '@/components/Service/index';
import HeaderBar from '@/components/HeaderBar';
import { toLang } from '@/utils/lang';
import { NavigateTo, showToast } from '@/utils/common';
import { addBankInfo, getBankInfo } from '@/api/mine';
const serviceRef = ref(null) as any;

const methodsList = ref([toLang('mine.wallet.setting.crypto')]);
const typeList = ref([toLang('mine.wallet.setting.usdc'), toLang('mine.wallet.setting.usdt'), toLang('mine.wallet.setting.pyusd')]);
const networkList = ref([toLang('mine.wallet.setting.ethereum'), toLang('mine.wallet.setting.tron'), toLang('mine.wallet.setting.bitcoin')]);

const state = reactive({
    realName: '',
    phoneNo: '',
    networkKey: -1,
    address: ''
}) as any;

onLoad(() => {
    getLoad();
});

//加载数据
const getLoad = async () => {
    const res = await getBankInfo();
    if (res.code !== 200) {
        return;
    }
    const { address, realName, phoneNo, network } = res.data;
    state.address = address;
    state.realName = realName;
    state.phoneNo = phoneNo;
    networkList.value.forEach((item, index) => {
        if (item === network) {
            state.networkKey = index;
        }
    });
};

//选中内容
const bindPickerChange = (e: any, key: string) => {
    state[key] = e.detail.value;
};

//关闭服弹窗
const onClose = () => {
    serviceRef.value.close();
};

//提交
const onSubmit = async () => {
    if (!state.realName) {
        showToast({ title: toLang('mine.wallet.setting.verifyName') });
        return;
    }
    if (!state.phoneNo) {
        showToast({ title: toLang('mine.wallet.setting.verifyPhoneNo') });
        return;
    }
    if (!state.address) {
        showToast({ title: toLang('mine.wallet.setting.verifyWalletAddress') });
        return;
    }
    if (state.networkKey == -1) {
        showToast({ title: toLang('mine.wallet.setting.verifyNetwork') });
        return;
    }

    const params = {
        address: state.address,
        realName: state.realName,
        phoneNo: state.phoneNo,
        network: networkList.value[state.networkKey]
    };
    const res = await addBankInfo(params);
    if (res.code !== 200) {
        return;
    }
    NavigateTo('/pages/mine/wallet/index');
};
</script>

<style lang="scss" scoped>
.password-container {
    padding: 0 30rpx;
    .form-container {
        .item {
            display: flex;
            align-items: center;
            padding: 40rpx 0;
            border-bottom: 1rpx solid #ebedf0;
            .icon {
                width: 44rpx;
            }
            .name {
                width: 160rpx;
                font-size: 28rpx;
                overflow-wrap: break-word;
                line-height: 50rpx;
            }
            .input {
                flex: 1;
                margin: 0 30rpx;
            }
            .arrow {
                width: 60rpx;
                display: flex;
                justify-content: flex-end;
            }
        }
    }
    .uni-input {
        font-size: 30rpx;
    }
    .grey {
        color: #bbb;
        font-size: 28rpx;
    }
    .form-btns {
        margin: 60rpx 0 40rpx;
        background: linear-gradient(135deg, #1989fa, #39b9f9);
        box-shadow: 0 1.06667vw 3.2vw #1989fa33;
    }
    .tips {
        display: flex;
        justify-content: center;
        font-size: 24rpx;
        color: #969799;
        .service {
            color: #1989fa;
            font-size: 26rpx;
            cursor: pointer;
            margin-left: 10rpx;
        }
    }
}
</style>
